import React, { PureComponent } from 'react';
import Swiper from 'react-native-swiper'
import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity, RefreshControl } from 'react-native';
import SpacingView from '../../../../widget/SpacingView'
import screen from '../../../../common/screen'
import GoodsListView from '../../tab/grouppurchase/GoodsListView'
import * as api from '../../../../api'
type Props = {
    navigation: any,
}
type State = {
    discounts: Array<Object>,
    advertisingList: Array<Object>,
    isASuccess: boolean,//是否轮播图请求成功
    isRSuccess: boolean,//是否推荐请求成功
}

class TabScene_grouppurchase extends PureComponent<Props, State>{
    constructor(props: Props) {
        super(props)
        this.state = {
            isRefreshing: false,
            discounts: [], //构造函数中给状态赋初值
            advertisingList: [],
            isASuccess: true,
            isRSuccess: true,
        }
    }
    //下拉刷新
    pullRefresh() {
        setTimeout(() => {
            this.requestData()
            this.setState({ isRefreshing: false })
        }, 2000)
    }
    //页面加载后调用请求数据的方法
    componentDidMount() {
        this.requestData()
        this.advertisingListData()
        //this.requestGroupPurchaseList()
    }
    requestGroupPurchaseList = async () => {
        try {
            var parameter = {}
            var list = await api.getGroupPurchaseList(parameter)

            this.setState({
                discounts: list,
                isASuccess: true,
            })
        } catch (error) {
            //alert('请求失败，请重试' + error)
            this.setState({
                isASuccess: false,
            })
        }
    }
    // 发送请求获取商品列表数据，用了async() await 这个语法后，response返回的是网络结果
    requestData = async () => {
        try {
            //  let response = await fetch(api.discount)
            //  let json = await response .json()
            let json = [
                {
                    "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
                    "title": "沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘",
                    "successcount": 10,
                    "price": 69.00
                },
                {
                    "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
                    "title": "沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘",
                    "successcount": 10,
                    "price": 69.00
                },
                {
                    "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
                    "title": "沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘",
                    "successcount": 10,
                    "price": 69.00
                },
                {
                    "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
                    "title": "沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘",
                    "successcount": 10,
                    "price": 69.00
                },
                {
                    "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
                    "title": "沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘",
                    "successcount": 10,
                    "price": 69.00
                },
                {
                    "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
                    "title": "沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘 果肉鲜嫩沃橘",
                    "successcount": 10,
                    "price": 69.00
                }
            ]
            //  this.setState({discounts:json.data})
            this.setState({ discounts: json })
        } catch (error) {
            alert('error' + error)
        }
    }
    //获取轮播图数据
    advertisingListData = async () => {
        try {
            //  let response = await fetch(api.discount)
            //  let json = await response .json()
            let sliderImgs = [
                'http://bftest.wangjushijie.com/web/userfiles/1/images/wsAdvertising/advertising/2018/01/%E6%9E%973.jpg',
                'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
                'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
            ]
            //  this.setState({discounts:json.data})
            this.setState({ advertisingList: sliderImgs })
        } catch (error) {
            alert('error' + error)
        }
    }

    render() {
        return (
            <View style={styles.container}>
                {/*轮播图*/}
                <ScrollView refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={() => this.requestData()}
                        tintColor='gray'
                    />
                }>
                    <Swiper style={styles.swiper}
                        autoplay={true}
                        loop={true}>
                        {this.state.advertisingList.map((img, i) => (
                            <TouchableOpacity style={styles.sliderImg} key={i}>
                                <Image style={styles.sliderImg} resizeMode='cover' source={{ uri: img }} />
                            </TouchableOpacity>
                        ))}
                    </Swiper>
                    {/*团购商品列表*/}
                    <View style={styles.GroupPurchaseView}>
                        {this.state.discounts.map((info, index) => (
                            <View key={index}>
                                <SpacingView />
                                <GoodsListView
                                    key={index}
                                    info={info}
                                    navigation={this.props.navigation}
                                />
                            </View>
                        ))}
                    </View>
                </ScrollView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    swiper: {
        width: screen.width,
        height: screen.width / 2,
    },
    sliderImg: {
        width: screen.width,
        height: screen.width / 2,
    },
    GroupPurchaseView: {
        justifyContent: 'center',
        alignItems: 'center',
    },
})
export default TabScene_grouppurchase